<template>
  <view class="login-container">
    <view class="login-header">
      <image
        class="logo"
        src="/static/images/index/1704738931441.png"
        mode="aspectFit"
      ></image>
      <text class="title">智能设备管理系统</text>
    </view>

    <view class="login-form">
      <view class="form-item">
        <fui-input
          v-model="formData.username"
          placeholder="请输入用户名"
          borderTop
          :padding="['32rpx']"
          margin="0"
          :borderRadius="16"
          backgroundColor="#F8F8F8"
        >
          <fui-icon name="my" color="#0052D9" size="48"></fui-icon>
        </fui-input>
      </view>

      <view class="form-item">
        <fui-input
          v-model="formData.password"
          placeholder="请输入密码"
          password
          borderTop
          :padding="['32rpx']"
          margin="0"
          :borderRadius="16"
          backgroundColor="#F8F8F8"
        >
          <fui-icon name="lock" color="#0052D9" size="48"></fui-icon>
        </fui-input>
      </view>

      <view class="btn-wrapper">
        <fui-button
          type="primary"
          width="600rpx"
          height="96rpx"
          text="登录"
          bold
          radius="48rpx"
          @click="handleLogin"
          background="linear-gradient(90deg, #0052D9 0%, #2B7FF9 100%)"
        ></fui-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
// import { getCaptcha, login } from "@/pages/api/my.js";
import { login, getCaptcha } from "@/pages/api/my/login.js";
// import { getCaptcha } from "/apis/cs.js";
import { useUserStore } from "@/stores/user";

const formData = ref({
  username: "admin",
  password: "admin",
});

const handleLogin = () => {
  getCaptcha();
  // if (!formData.value.username || !formData.value.password) {
  // 	uni.showToast({
  // 		title: '请输入用户名和密码',
  // 		icon: 'none'
  // 	});
  // 	return;
  // }

  login(formData.value.username, formData.value.password)
    .then((res) => {
      uni.hideLoading();
      if (res.access_token) {
        // 存储token
        const userStore = useUserStore();
        userStore.setToken(res.access_token); // 存储access_token
        userStore.setRefreshToken(res.refresh_token); // 存储refresh_token

        // 打印存储结果，用于调试
        console.log("登录成功，存储的token:", {
          access_token: res.access_token,
          refresh_token: res.refresh_token,
        });

        // 验证token是否正确存储
        if (process.env.UNI_PLATFORM === "h5") {
          const storedData =
            localStorage.getItem("user") || sessionStorage.getItem("user");
          console.log("验证存储的token:", storedData);
        } else {
          const storedData = uni.getStorageSync("user");
          console.log("验证存储的token:", storedData);
        }

        uni.showToast({
          title: "登录成功",
          icon: "success",
        });

        // 登录成功后跳转到首页
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 1500);
      } else {
        uni.showToast({
          title: res.msg || "登录失败",
          icon: "none",
        });
      }
    })
    .catch((err) => {
      uni.hideLoading();
      console.error("登录失败：", err);
      uni.showToast({
        title: "登录失败，请稍后重试",
        icon: "none",
      });
    });
};
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #eef5ff 0%, #ffffff 100%);
  padding: 60rpx 40rpx;
  box-sizing: border-box;

  .login-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 100rpx;
    margin-top: 80rpx;

    .logo {
      width: 180rpx;
      height: 180rpx;
      margin-bottom: 40rpx;
      border-radius: 30rpx;
      box-shadow: 0 10rpx 20rpx rgba(0, 82, 217, 0.1);
    }

    .title {
      font-size: 42rpx;
      font-weight: bold;
      color: #333;
      letter-spacing: 2rpx;
    }
  }

  .login-form {
    margin-top: 60rpx;
    padding: 40rpx;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 30rpx;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);

    .form-item {
      margin-bottom: 30rpx;
      border-radius: 16rpx;
      overflow: hidden;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .btn-wrapper {
      margin-top: 80rpx;
      display: flex;
      justify-content: center;

      :deep(.fui-button) {
        box-shadow: 0 10rpx 20rpx rgba(0, 82, 217, 0.2);
        font-size: 32rpx;
        letter-spacing: 4rpx;
      }
    }
  }
}
</style>
